<template>
    <Header />
    <main>
        <div class="table_box">
            <div class="table_header">
                <ul>
                    <li>生产中订单数量：118</li>
                    <li>加急订单数量：12</li>
                    <li>逾期订单数量：6</li>
                    <li>今日入库数量：110</li>
                    <li>今日发货数量：80</li>
                </ul>
                <button>表头设置</button>
            </div>
            <div class="table_c">
                <table>
                    <tr>
                        <th v-for="th in tableTh" :key="th.label"
                            :style="{ width: 'calc(' + th.width / design_width + '* 100vw)', color: th.color, backgroundColor: th.backgroundColor }">
                            {{ th.label }}
                        </th>
                    </tr>
                    <tbody ref="table_body" class="table_body" @mouseenter="tbody_touchStart" @mouseleave="tbody_touchEnd" @touchstart="tbody_touchStart" @touchend="tbody_touchEnd">
                        <tr v-for="(item, index) in tableData" :key="item.trackingNumber">
                            <td>
                                <p>{{ index + 1 }}</p>
                            </td>
                            <td>
                                <p>{{ item.trackingNumber }}</p>
                            </td>
                            <td class="productmodel">
                                <p>{{ item.productmodel }}</p>
                            </td>
                            <td>
                                <p>{{ item.count }}</p>
                            </td>
                            <td class="consignee">
                                <p>{{ item.consignee }}</p>
                            </td>
                            <td>
                                <p>{{ item.orderRequirements }}</p>
                            </td>
                            <td>
                                <p>{{ item.productionDate }}</p>
                            </td>
                            <td>
                                <p>{{ item.deliveryDate }}</p>
                            </td>
                            <td class="currentProcess">
                                <p>{{ item.currentProcess }}</p>
                            </td>
                            <td class="productionStatus">
                                <p><span
                                        :class="item.productionStatus == '正常' ? 'normal' : item.productionStatus == '加急' ? 'urgent' : item.productionStatus == '逾期' ? 'overdue' : 'risk'">{{
                                            item.productionStatus }}</span></p>
                            </td>
                            <td>
                                <p></p>{{ item.overdueDays }}
                            </td>
                            <td class="processProgress">
                                <ul>
                                    <li v-for="(process, index) in item.processProgress" :key="index">
                                        <div class="processItem"
                                            :class="process.processStatus == 'on' ? 'on' : process.processStatus == 'in' ? 'in' : 'off'">
                                            <div class="circle"></div>
                                        </div>
                                        <span>{{ process.processName }}</span>
                                    </li>
                                </ul>
                            </td>
                            <td class="wages">
                                {{ item.wages }}
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>

        </div>
        <div class="pictograph">
            <div class="pictograph_top"></div>
            <div class="pictograph_content">
                <div class="order_status" ref="orderStatusChart"></div>
                <div class="production_order" ref="productionOrderChart"></div>
                <div class="production_process" ref="productionProcessChart"></div>
            </div>
        </div>
    </main>
    <footer>
        <p>财八斗科技技术支持 版本2.0</p>
    </footer>
</template>

<script setup>
import * as echarts from 'echarts'
// 设计稿像素
const design_width = inject('constants').design_width

const Header = defineAsyncComponent(() => import('../components/Header.vue'))
// 表头
const tableTh = ref([
    {
        label: '序号',
        color: "",
        backgroundColor: "",
        width: 180
    },
    {
        label: '跟单号',
        color: "",
        backgroundColor: "",
        width: 240
    },
    {
        label: '产品型号',
        color: "",
        backgroundColor: "",
        width: 280
    },
    {
        label: '数量',
        color: "",
        backgroundColor: "",
        width: 180
    },
    {
        label: '收货人',
        color: "#e8b905",
        backgroundColor: "",
        width: 450
    },
    {
        label: '订单要求',
        color: "",
        backgroundColor: "",
        width: 670
    },
    {
        label: '排产日期',
        color: "",
        backgroundColor: "",
        width: 280
    },
    {
        label: '出货日期',
        color: "",
        backgroundColor: "",
        width: 280
    },
    {
        label: '当前工序',
        color: "#e8b905",
        backgroundColor: "",
        width: 280
    },
    {
        label: '生产状态',
        color: "",
        backgroundColor: "",
        width: 280
    },
    {
        label: '逾期天数',
        color: "",
        backgroundColor: "",
        width: 280
    },
    {
        label: '工序进度',
        color: "",
        backgroundColor: "#15499a",
        width: 1100
    },
    {
        label: '工序工价',
        color: "",
        backgroundColor: "#15499a",
        width: 260
    },
])

// 表格数据
const tableData = ref([
    {
        trackingNumber: "241013022",
        productmodel: "A188",
        count: 20,
        consignee: "李四/吴德贵",
        orderRequirements: "单人沙发+双人沙发 1.5米*1.8米左贵妃，常规颜色，带功能",
        productionDate: "24.10.10",
        deliveryDate: "24.10.6",
        currentProcess: "扪工",
        productionStatus: "正常",
        overdueDays: "0",
        processProgress: [
            {
                processName: "木工",
                processStatus: "on",
            },
            {
                processName: "裁皮",
                processStatus: "on",
            },
            {
                processName: "车工",
                processStatus: "on",
            },
            {
                processName: "开棉",
                processStatus: "on",
            },
            {
                processName: "打底",
                processStatus: "on",
            },
            {
                processName: "扪工",
                processStatus: "in",
            },
            {
                processName: "质检",
                processStatus: "off",
            },
            {
                processName: "包装",
                processStatus: "off",
            }
        ],
        wages: "工价"
    },
    {
        trackingNumber: "241013023",
        productmodel: "B113",
        count: 2,
        consignee: "张三",
        orderRequirements: "框架床 1.8米 常规款",
        productionDate: "24.10.11",
        deliveryDate: "24.10.18",
        currentProcess: "裁皮",
        productionStatus: "加急",
        overdueDays: "2",
        processProgress: [
            {
                processName: "木工",
                processStatus: "on",
            },
            {
                processName: "裁皮",
                processStatus: "in",
            },
            {
                processName: "车工",
                processStatus: "off",
            },
            {
                processName: "扪工",
                processStatus: "off",
            },
            {
                processName: "质检",
                processStatus: "off",
            },
            {
                processName: "包装",
                processStatus: "off",
            }
        ],
        wages: "工价"
    },
    {
        trackingNumber: "241013024",
        productmodel: "A213",
        count: 1,
        consignee: "李四",
        orderRequirements: "双人沙发+脚踏+茶几1.8米 常规款",
        productionDate: "24.10.11",
        deliveryDate: "24.10.16",
        currentProcess: "扪工",
        productionStatus: "逾期",
        overdueDays: "0",
        processProgress: [
            {
                processName: "木工",
                processStatus: "on",
            },
            {
                processName: "裁皮",
                processStatus: "on",
            },
            {
                processName: "车工",
                processStatus: "on",
            },
            {
                processName: "开棉",
                processStatus: "on",
            },
            {
                processName: "打底",
                processStatus: "on",
            },
            {
                processName: "扪工",
                processStatus: "in",
            },
            {
                processName: "质检",
                processStatus: "off",
            },
            {
                processName: "包装",
                processStatus: "off",
            }
        ],
        wages: "工价"
    },
    {
        trackingNumber: "241013025",
        productmodel: "A188",
        count: 10,
        consignee: "王总/李丽/梁宏伟",
        orderRequirements: "单人沙发+双人沙发 1.5米*1.8米左贵妃，常规颜色，带功能",
        productionDate: "24.10.10",
        deliveryDate: "24.10.6",
        currentProcess: "扪工",
        productionStatus: "正常",
        overdueDays: "0",
        processProgress: [
            {
                processName: "木工",
                processStatus: "on",
            },
            {
                processName: "裁皮",
                processStatus: "on",
            },
            {
                processName: "车工",
                processStatus: "on",
            },
            {
                processName: "开棉",
                processStatus: "on",
            },
            {
                processName: "打底",
                processStatus: "on",
            },
            {
                processName: "扪工",
                processStatus: "in",
            },
            {
                processName: "质检",
                processStatus: "off",
            },
            {
                processName: "包装",
                processStatus: "off",
            }
        ],
        wages: "工价"
    },
    {
        trackingNumber: "241013026",
        productmodel: "B113",
        count: 2,
        consignee: "卢总",
        orderRequirements: "悬浮床 1.5米 常规款",
        productionDate: "24.10.11",
        deliveryDate: "24.10.18",
        currentProcess: "车工",
        productionStatus: "逾期风险",
        overdueDays: "0",
        processProgress: [
            {
                processName: "木工",
                processStatus: "on",
            },
            {
                processName: "裁皮",
                processStatus: "on",
            },
            {
                processName: "车工",
                processStatus: "in",
            },
            {
                processName: "扪床头",
                processStatus: "off",
            },
            {
                processName: "扪床尾",
                processStatus: "off",
            },
            {
                processName: "质检",
                processStatus: "off",
            },
            {
                processName: "包装",
                processStatus: "off",
            }
        ],
        wages: "工价"
    },
    {
        trackingNumber: "241013027",
        productmodel: "B110",
        count: 2,
        consignee: "马云",
        orderRequirements: "框架床 1.8米 常规款",
        productionDate: "24.10.11",
        deliveryDate: "24.10.18",
        currentProcess: "裁皮",
        productionStatus: "加急",
        overdueDays: "1",
        processProgress: [
            {
                processName: "木工",
                processStatus: "on",
            },
            {
                processName: "裁皮",
                processStatus: "in",
            },
            {
                processName: "车工",
                processStatus: "off",
            },
            {
                processName: "扪工",
                processStatus: "off",
            },
            {
                processName: "质检",
                processStatus: "off",
            },
            {
                processName: "包装",
                processStatus: "off",
            }
        ],
        wages: "工价"
    },
    {
        trackingNumber: "241013028",
        productmodel: "C113",
        count: 1,
        consignee: "张彪",
        orderRequirements: "框架床 1.8米 常规款",
        productionDate: "24.10.11",
        deliveryDate: "24.10.18",
        currentProcess: "扪工",
        productionStatus: "正常",
        overdueDays: "0",
        processProgress: [
            {
                processName: "木工",
                processStatus: "on",
            },
            {
                processName: "裁皮",
                processStatus: "on",
            },
            {
                processName: "车工",
                processStatus: "on",
            },
            {
                processName: "开棉",
                processStatus: "on",
            },
            {
                processName: "打底",
                processStatus: "on",
            },
            {
                processName: "扪工",
                processStatus: "in",
            },
            {
                processName: "质检",
                processStatus: "off",
            },
            {
                processName: "包装",
                processStatus: "off",
            }
        ],
        wages: "工价"
    },
    {
        trackingNumber: "241013029",
        productmodel: "B113",
        count: 2,
        consignee: "王小二",
        orderRequirements: "框架床 1.5米 卡其色，头层牛皮，配实木排骨架",
        productionDate: "24.10.11",
        deliveryDate: "24.10.18",
        currentProcess: "打底",
        productionStatus: "正常",
        overdueDays: "0",
        processProgress: [
            {
                processName: "木工",
                processStatus: "on",
            },
            {
                processName: "裁皮",
                processStatus: "on",
            },
            {
                processName: "车工",
                processStatus: "on",
            },
            {
                processName: "开棉",
                processStatus: "on",
            },
            {
                processName: "打底",
                processStatus: "in",
            },
            {
                processName: "扪工",
                processStatus: "off",
            },
            {
                processName: "质检",
                processStatus: "off",
            },
            {
                processName: "包装",
                processStatus: "off",
            }
        ],
        wages: "工价"
    },
])
const table_body = ref()
let clone = undefined
onMounted(() => {
    // 数据总数大于7才显示动画
    if(tableData.value.length > 7){
        const animation_time = (tableData.value.length * 2) + "s"
        table_body.value.style.animationDuration = animation_time
        const tbody = table_body.value;
        // 复制内容（深拷贝避免引用问题）
        clone = tbody.cloneNode(true);
        tbody.parentNode.appendChild(clone);
        clone.addEventListener('mouseenter',tbody_touchStart, false);
        clone.addEventListener('mouseleave',tbody_touchEnd, false);
        clone.addEventListener('touchstart',tbody_touchStart, false);
        clone.addEventListener('touchend',tbody_touchEnd, false);
    }else{
        table_body.value.style.animationName = "none"
    }
})

const tbody_touchStart = () =>{
    if(table_body.value){
        table_body.value.style.animationPlayState = 'paused'
        clone && (clone.style.animationPlayState = 'paused')
    }
}

const tbody_touchEnd = () =>{
    if(table_body.value){
        table_body.value.style.animationPlayState = 'running'
        clone && (clone.style.animationPlayState = 'running')
    }
}

// 图表DOM引用
const orderStatusChart = ref(null)
const productionOrderChart = ref(null)
const productionProcessChart = ref(null)
// 初始化图表
onMounted(() => {
    const windowWidth = window.innerWidth
    // 当前订单状态分析图
    if (orderStatusChart.value) {
        const chart = echarts.init(orderStatusChart.value)
        const upateOption = () => {
            return {
                title: {
                    text: '当前订单状态分析',
                    left: 'center',
                    top: windowWidth / design_width * 32,
                    textStyle: {
                        color: '#00a2e9',
                        fontSize: windowWidth / design_width * 54,
                    }
                },
                legend: {
                    orient: 'vertical',
                    right: "6%",
                    top: '32%',
                    itemGap: windowWidth / design_width * 27,
                    data: ['正常订单', '逾期风险订单', '已逾期订单', '加急订单'],
                    icon: "circle",
                    itemWidth: windowWidth / design_width * 45,    // 图标宽度
                    itemHeight: windowWidth / design_width * 45,   // 图标高度
                    symbolKeepAspect: false,
                    textStyle: {
                        fontSize: windowWidth / design_width * 35,
                        color: '#fff',
                    },
                    align: 'left',
                    selectedMode: false,
                    // 关键：使用transform实现精确垂直居中
                    formatter: (name) => {
                        // 获取当前系列数据
                        const seriesData = chart.getOption().series[0].data;
                        // 找到对应名称的数据项
                        const item = seriesData.find(d => d.name === name);
                        // 计算百分比（保留1位小数）
                        const percent = item ? (item.value / seriesData.reduce((a, b) => a + b.value, 0) * 100).toFixed(1) : '0';
                        return `  ${name} ${percent}%`;
                    },
                },
                series: [
                    {
                        name: '订单状态',
                        type: 'pie',
                        radius: ['30%', '55%'],
                        avoidLabelOverlap: false,
                        itemStyle: {
                            borderColor: '#fff',
                            borderWidth: 0
                        },
                        center: ['32%', '55%'],
                        label: {
                            show: false,
                        },
                        emphasis: {
                            label: {
                                show: false,
                            }
                        },
                        data: [
                            {
                                value: 5,
                                name: '加急订单',
                                itemStyle: { color: '#e8b905' }
                            },
                            {
                                value: 10,
                                name: '已逾期订单',
                                itemStyle: { color: '#82bf34' }
                            },
                            {
                                value: 15,
                                name: '逾期风险订单',
                                itemStyle: { color: '#e62129' }
                            },
                            {
                                value: 80,
                                name: '正常订单',
                                itemStyle: { color: '#00a2e9' }
                            }
                        ]
                    }
                ]
            }
        }
        chart.setOption(upateOption(chart.getWidth()))
        // 响应式调整
        window.addEventListener('resize', function () {
            chart.setOption(upateOption())
            chart.resize()
        })
    }
    // 近30天生产订单分析图
    if (productionOrderChart.value) {
        const chart = echarts.init(productionOrderChart.value)
        // 刻度
        const categories = [];
        // 柱形图原始数据
        const barData = [138, 127, 110, 100, 135, 140, 138, 127, 110, 100, 135, 140, 138, 127, 110, 100, 135, 140, 138, 127, 110, 100, 135, 140, 138, 127, 110, 100, 135, 140]
        const newbarData = barData.flatMap(item => [item, 0]);
        newbarData.unshift(0);
        for (let i = 0.5; i <= 30.5; i += 0.5) {
            categories.push(i % 1 === 0 ? i.toString() : i.toFixed(1));
        }
        // 折线图原始数据
        const lineData = [[1, 140], [3.7, 120], [6.3, 137], [7.8, 118], [10, 140], [14.4, 159], [17, 128], [18, 135], [21.5, 112], [24, 142], [26, 128], [27, 132], [28, 120], [29, 128], [30, 120]]
        const newLineData = lineData.map(item => [item[0] * 2, item[1]]);
        const upateOption = () => {
            return {
                title: {
                    text: '近30天生产订单',
                    left: 'center',
                    top: windowWidth / design_width * 32,
                    textStyle: {
                        color: '#00a2e9',
                        fontSize: windowWidth / design_width * 54,
                    }
                },
                tooltip: {},
                xAxis: {
                    type: 'category',
                    data: categories,
                    interval: 0.5,
                    axisLabel: {
                        show: true,
                        interval: 0,
                        color: '#a0d9f6',
                        fontSize: windowWidth / design_width * 27,
                        margin: windowWidth / design_width * 20,
                        formatter: function (value) {
                            if (value % 1 != 0) {
                                return "";
                            }
                            return value;
                        }
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            color: '#2f318b',
                            width: 1
                        }
                    },
                    axisTick: {
                        alignWithLabel: true,
                        length: 0,
                        interval: (index) => index % 2 === 0
                    },
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: '#00a2e9',
                        }
                    },

                },
                yAxis: {
                    type: 'value',
                    min: 0,          // 强制y轴从0开始
                    max: 200,        // 强制y轴到200结束
                    interval: 10,
                    boundaryGap: false,
                    axisLabel: {
                        show: true,
                        color: '#a0d9f6',
                        fontSize: windowWidth / design_width * 20,
                        margin: windowWidth / design_width * 20,
                        formatter: function (value) {
                            // 强制显示 0 和 200 的标签（即使数据范围不包含）
                            if (value === 0 || value === 200) {
                                return value;
                            }
                            return value;
                        }
                    },
                    axisTick: {
                        length: 0,
                        lineStyle: {
                            type: 'dashed'
                        }
                    },
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: '#00a2e9',
                        }
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            color: '#2f318b',
                            width: 1
                        }
                    },
                },
                grid: {
                    // 通过以下属性控制数据区域的位置和尺寸
                    left: windowWidth / design_width * 40,    // 左侧距离（坐标轴标签可能占用的空间）
                    right: windowWidth / design_width * 40,   // 右侧距离
                    top: windowWidth / design_width * 150,     // 顶部距离（标题、图例可能占用的空间）
                    bottom: windowWidth / design_width * 45,  // 底部距离
                    containLabel: true  // 是否包含坐标轴的标签（避免标签溢出）
                },
                series: [
                    // 折线图
                    {
                        data: newLineData,
                        type: 'line',
                        xAxisIndex: 0,
                        color: '#fff000',
                        symbol: "none",
                        lineStyle: {
                            width: 1  // 调整数值，如 1、2、3 等
                        },
                    },
                    // 柱状图
                    {
                        type: 'bar',
                        data: newbarData,
                        barWidth: windowWidth / design_width * 40,
                        itemStyle: {
                            color: {
                                type: 'linear',
                                x: 0,          // 渐变起点 x 坐标（0=左边界）
                                y: 0,          // 渐变起点 y 坐标（0=下边界）
                                x2: 0,         // 渐变终点 x 坐标（0=右边界）
                                y2: 1,         // 渐变终点 y 坐标（1=上边界）
                                colorStops: [{
                                    offset: 0,
                                    color: '#a0d9f6' // 0% 处的颜色（底部）
                                }, {
                                    offset: 1,
                                    color: '#00a2e9' // 100% 处的颜色（顶部）
                                }]
                            },
                        }
                    },
                ]
            }
        }
        chart.setOption(upateOption(chart.getWidth()))
        // 响应式调整
        window.addEventListener('resize', function () {
            chart.setOption(upateOption())
            chart.resize()
        })
    }
    // 当前生产工序情况分析图
    if (productionProcessChart.value) {
        const chart = echarts.init(productionProcessChart.value)
        const upateOption = () => {
            const option = {
                title: {
                    text: '当前生产工序情况分析',
                    left: 'center',
                    top: windowWidth / design_width * 32,
                    textStyle: {
                        color: '#00a2e9',
                        fontSize: windowWidth / design_width * 54,
                    }
                },
                legend: {
                    orient: 'vertical',
                    right: "9%",
                    top: '28%',
                    itemGap: windowWidth / design_width * 75,
                    data: ['完成工序', '生产中工序', '待完成工序'],
                    icon: "circle",
                    itemWidth: windowWidth / design_width * 45,    // 图标宽度
                    itemHeight: windowWidth / design_width * 45,   // 图标高度
                    symbolKeepAspect: false,
                    textStyle: {
                        fontSize: windowWidth / design_width * 35,
                        color: '#fff',
                    },

                    align: 'left',
                    selectedMode: false,
                    // 关键：使用transform实现精确垂直居中
                    formatter: (name) => {
                        // 获取当前系列数据
                        const seriesData = chart.getOption().series[0].data;
                        // 找到对应名称的数据项
                        const item = seriesData.find(d => d.name === name);
                        // 计算百分比（保留1位小数）
                        const percent = item ? (item.value / seriesData.reduce((a, b) => a + b.value, 0) * 100).toFixed(1) : '0';
                        return `  ${name} ${percent}%`;
                    },
                },
                series: [
                    {
                        name: '订单状态',
                        type: 'pie',
                        radius: ['30%', '55%'],
                        avoidLabelOverlap: false,
                        itemStyle: {
                            borderColor: '#fff',
                            borderWidth: 0,
                        },
                        center: ['32%', '55%'],
                        label: {
                            show: false,
                        },
                        emphasis: {
                            label: {
                                show: false,
                            }
                        },
                        data: [
                            {
                                value: 80,
                                name: '完成工序',
                                itemStyle: { color: '#00a2e9' }
                            },
                            {
                                value: 13,
                                name: '生产中工序',
                                itemStyle: { color: '#82bf34' }
                            },
                            {
                                value: 7,
                                name: '待完成工序',
                                itemStyle: { color: '#fefefe' }
                            },

                        ]
                    }
                ]
            }
            // 假设已有 option 配置
            option.legend.data = option.legend.data.map(item => {
                if (item == '生产中工序') {
                    return {
                        name: item,
                        itemStyle: {
                            color: new echarts.graphic.RadialGradient(
                                // 参数说明：
                                // x, y: 渐变中心点（范围 [0,1]，相对于图标）
                                // r: 渐变半径（范围 [0,1]）
                                0.5, 0.5, 0.5, // 中心点 (50%,50%)，半径 50%
                                [
                                    { offset: 0, color: '#ffffff' }, // 中心颜色（红色）
                                    { offset: 1, color: '#009b4c' }   // 边缘颜色（绿色）
                                ],
                                false // 是否使用全局坐标系（通常保持默认 false）
                            )
                        }
                    };
                }
                return item; // 其他项保持不变
            });
            return option
        }
        chart.setOption(upateOption(chart.getWidth()))
        // 响应式调整
        window.addEventListener('resize', function () {
            chart.setOption(upateOption())
            chart.resize()
        })
    }
})
</script>

<style scoped>
main {
    margin-top: calc(45/var(--design_width) * 100vw);
}

.table_box {
    border: calc(3/var(--design_width) * 100vw) solid #2f318b;
}

.table_header {
    display: flex;
    align-items: end;
    justify-content: space-between;
}

.table_header ul {
    display: flex;
    align-items: center;
}

.table_header ul li {
    font-size: calc(68/var(--design_width) * 100vw);
    color: var(--color_blue);
    padding: calc(30/var(--design_width) * 100vw) calc(100/var(--design_width) * 100vw);
}

.table_header button {
    font-size: calc(48/var(--design_width) * 100vw);
    color: var(--color_blue);
    background-color: #2f318b;
    cursor: pointer;
    padding: calc(5/var(--design_width) * 100vw) calc(30/var(--design_width) * 100vw);
    margin-bottom: calc(5/var(--design_width) * 100vw);
}

.table_box .table_c {
    max-height: 52vh;
    /* overflow-y: auto; */
    overflow: hidden;
    height: auto;
}

table {
    width: 100%;
    border: none;
    border-spacing: 0;
}

table tr:nth-of-type(odd) {
    background-color: #2f318b;
    border: none;
}

table tr:has(th) {
    position: relative;
    z-index: 100;
}

table th {
    font-size: calc(48/var(--design_width) * 100vw);
    color: #fff;
    padding: calc(40/var(--design_width) * 100vw) calc(0/var(--design_width) * 100vw);
}

table td {
    vertical-align: middle;
    font-size: calc(37/var(--design_width) * 100vw);
    text-align: center;
    color: #fff;
    padding: calc(12/var(--design_width) * 100vw) calc(0/var(--design_width) * 100vw);
    line-height: 1.2;
}

table td p {
    display: inline-block;
    max-width: calc(100% - 1em);
    text-align: start;
}

table .productmodel {
    color: #a0d9f6;
    font-weight: bold;
    font-size: calc(50/var(--design_width) * 100vw);
}

table .consignee {
    font-size: calc(50/var(--design_width) * 100vw);
    font-weight: bold;
    color: #e8b905;
}

table .currentProcess {
    font-size: calc(50/var(--design_width) * 100vw);
    font-weight: bold;
    color: #e8b905;
}

table .productionStatus span {
    border-radius: 9999px;
    display: inline-block;
    width: calc(220/var(--design_width) * 100vw);
    line-height: calc(85/37);
    text-align: center;
}

table .productionStatus .normal {
    background-color: var(--color_blue);
}

table .productionStatus .urgent {
    background-color: #e62129;
}

table .productionStatus .overdue {
    background-color: #e8b905;
}

table .productionStatus .risk {
    background-color: #82bf34;
}

table .processProgress ul {
    display: flex;
    align-items: center;
    color: var(--color_blue);
}

table .processProgress .processItem {
    display: flex;
    align-items: center;
    margin-bottom: calc(15/var(--design_width) * 100vw);
}

table .processProgress .processItem::before,
table .processProgress .processItem::after {
    content: "";
    width: calc(30/var(--design_width) * 100vw);
    height: calc(10/var(--design_width) * 100vw);
    background-color: var(--color_blue);
}

table .processProgress .processItem.in::before,
table .processProgress .processItem.in::after {
    background-color: #009b4c;
}

table .processProgress li:nth-of-type(1) .processItem::before,
table .processProgress li:nth-last-of-type(1) .processItem::after {
    visibility: hidden;
}

table .processProgress .on .circle {
    background-color: var(--color_blue);
}

table .processProgress .in .circle {
    background: -webkit-radial-gradient(center, circle cover, #ffffff 0%, #009b4c 70%);
    background: radial-gradient(circle at center, #ffffff 0%, #009b4c 70%);
}

table .processProgress .off .circle {
    background-color: #fff;
}

table .processProgress ul .circle {
    width: calc(80/var(--design_width) * 100vw);
    height: calc(80/var(--design_width) * 100vw);
    border-radius: 50%;
}

table .wages {
    font-size: calc(50/var(--design_width) * 100vw);
    color: var(--color_blue);
}

.pictograph_top {
    margin-bottom: calc(3/var(--design_width) * 100vw);
    margin-top: calc(16/var(--design_width) * 100vw);
    height: calc(36/var(--design_width) * 100vw);
    background: url(../assets/pictograph_top.png) no-repeat center;
    background-size: 99.3% auto;
}

.pictograph_content {
    display: flex;
    justify-content: space-between;
}

.pictograph .order_status,
.pictograph .production_order,
.pictograph .production_process {
    position: relative;
    border: calc(5/var(--design_width) * 100vw) solid #2f318b;
    border-radius: calc(30/var(--design_width) * 100vw);
    height: calc(600/var(--design_width) * 100vw);
}

.pictograph .order_status {
    width: calc(1000/var(--design_width) * 100vw);
}

.pictograph .production_order {
    width: calc(2730/var(--design_width) * 100vw);
}

.pictograph .production_process {
    width: calc(1000/var(--design_width) * 100vw);
}

footer {
    margin-top: calc(42/var(--design_width) * 100vw);
    border-top: calc(10/var(--design_width) * 100vw) solid var(--color_blue);
}

footer p {
    font-size: calc(40/var(--design_width) * 100vw);
    text-align: center;
    color: var(--color_blue);
    line-height: 2;
}

.table_body{
    animation: scroll 10s linear infinite;
    /* animation-play-state:paused; */
}
@keyframes scroll {
  0% { transform: translateY(0%); }
  100% { transform: translateY(-100%); }
}
</style>